<template>
  <div style="width: 100%;">
    <!-- 微信号 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">微信号:</span>
        <div>{{ currentFriend.FriendNo || "" }}</div>
      </div>
    </div>

    <!-- 备注 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">备注:</span>
        <div>{{ currentFriend.Memo || "" }}</div>
        <div class="btns">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit-outline"
            circle
            @click="modifyMemo"
          ></el-button>
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            circle
            @click="deleteMemo"
          ></el-button>
        </div>
      </div>
    </div>
    <!-- 描述 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">描述：</span>
        <div>{{ currentFriend.Desc || "" }}</div>
        <div class="btns">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit-outline"
            circle
            @click="modifyDesc"
          ></el-button>
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            circle
            @click="deleteDesc"
          ></el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "LabelRemark",
  data() {
    return {
      labelDialogVisible: false,
      currentTag: "", // 标签名
      tagKey: 0, // 标签id
    };
  },
  props: {
    currentFriend: {
      type: Object,
      required: true,
      default: function () {
        return {};
      },
    },
  },
  methods: {
    // 修改备注
    modifyMemo() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning("请先选择一个好友！");
        return;
      }
      if (this.currentFriend.isGh) {
        this.$message.warning("不能修改公众号的备注！");
        return;
      }
      this.$prompt(
        `修改<b style="color:green;"> ${this.currentFriend.FriendNick} </b>的备注`,
        "修改备注",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPlaceholder: this.currentFriend.Memo,
          inputValue: this.currentFriend.Memo,
          dangerouslyUseHTMLString: true,
          inputPattern: /\S{1,50}/,
          inputErrorMessage: "备注长度1-50，不能含有特殊字符！",
        }
      )
        .then(({ value }) => {
          let message = {
            WeChatId: this.currentFriend.WeChatId,
            FriendId: this.currentFriend.FriendId,
            Memo: value,
          };
          this.$store.dispatch("websocket/ModifyFriendMemoTask", message);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 删除备注
    deleteMemo() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning("请先选择一个好友！");
        return;
      }
      if (!this.currentFriend.Memo) {
        this.$message.warning("该好友没有备注，无需删除！");
        return;
      }
      this.$confirm("删除备注?", "删除备注", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let message = {
            WeChatId: this.currentFriend.WeChatId,
            FriendId: this.currentFriend.FriendId,
            DelFlag: 1,
          };
          this.$store.dispatch("websocket/ModifyFriendMemoTask", message);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 修改描述
    modifyDesc() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning("请先选择一个好友！");
        return;
      }
      if (this.currentFriend.isGh) {
        this.$message.warning("不能修改公众号的描述！");
        return;
      }
      this.$prompt(
        `修改<b style="color:green;"> ${this.currentFriend.FriendNick} </b>的描述`,
        "修改描述",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPlaceholder: this.currentFriend.Desc,
          inputValue: this.currentFriend.Desc,
          dangerouslyUseHTMLString: true,
          inputPattern: /\S{1,200}/,
          inputErrorMessage: "备注长度1-200，不能含有特殊字符！",
        }
      )
        .then(({ value }) => {
          let message = {
            WeChatId: this.currentFriend.WeChatId,
            FriendId: this.currentFriend.FriendId,
            Desc: value,
          };
          this.$store.dispatch("websocket/ModifyFriendMemoTask", message);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 删除描述
    deleteDesc() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning("请先选择一个好友！");
        return;
      }
      if (!this.currentFriend.Desc) {
        this.$message.warning("该好友没有描述，无需删除！");
        return;
      }
      this.$confirm("删除描述?", "删除描述", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let message = {
            WeChatId: this.currentFriend.WeChatId,
            FriendId: this.currentFriend.FriendId,
            DelFlag: 2,
          };
          this.$store.dispatch("websocket/ModifyFriendMemoTask", message);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.friend-item {
  width: 100%;
  margin: 5px 0;
  height: 30px;
  line-height: 30px;
  .friend-item-title {
    background: $bg-color-nav-title-3;
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    .tip {
      line-height: 30px;
      height: 30px;
    }
    .btns {
      line-height: 30px;
      .el-button.is-circle{
        padding: 5px;
      }
    }
  }

  .friend-item-content {
    background: white;
    min-height: 30px;
    padding: 5px;
    //   border: solid red 1px;
    .phone-item {
      // border: solid red 1px;
      padding: 5px 0;
      .delete-one-phone {
        margin-left: 20px;
      }
    }
    .el-tag {
      // border: solid yellow 1px;
      margin: 2px;
    }
  }
}
</style>
